<template>
     <!-- 级联组件 -->
    <div class="">
      <el-cascader :options="options" v-model="values" @change="handleChange"> </el-cascader>
    </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
//import引入的组件需要注入到对象中才能使用
  components: {
    HelloWorld,
  },
  data(){
//这里存放数据
    return {
      values:[],
      options:[
        {
          value:'1',
          label:'指南',
          children:[
            {
              value:'1-1',
              label:'设计原则',
              children:[
                {
                  value:'1-1-1',
                  label:'一致',
                },
                {
                  value:'1-1-2',
                  label:'反馈',
                },
                {
                  value:'1-1-3',
                  label:'效率',
                },
                {
                  value:'1-1-4',
                  label:'可控',
                }
              ]
            },
            {
              value:'1-2',
              label:'导航',
            }
          ]
        },
        {
          value:'2',
          label:'组件',
        },
        {
          value:'3',
          label:'资源'
        }
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange:function(values){
      console.log('现在选中的是',values);
    }
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  
};
</script>

<style lang="less" scoped>

</style>
